<script>
import { defineComponent, onMounted, computed, ref } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import { useColumnsStore } from '@/store/column';
import Footer from '../components/footer.vue';
import ParentHeader from '../components/parentHeader.vue';
import { getArticleListService,getColumnDetailService } from '@/api/user.js';

export default defineComponent({
  name: 'AllArticles',
  components: {
    Footer,
    ParentHeader,
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const columnsStore = useColumnsStore();
    const allArticles = ref([]);
    const columnDetail = ref(null);

    // 获取栏目详情数据
    const fetchColumnDetail = async (id) => {
      try {
        const response = await getColumnDetailService(id);
        columnDetail.value = response.data;
      } catch (error) {
        console.error("Failed to fetch column detail:", error);
      }
    };

    // 获取所有文章列表的方法
    const fetchAllArticles = async (subColumnId) => {
      try {
        const params = { subColumnId };
        const response = await getArticleListService(params);
        allArticles.value = response.data;
      } catch (error) {
        console.error("Failed to fetch all articles list:", error);
      }
    };

    // 根据路由参数中的 columnId 获取栏目详情和所有文章
    onMounted(async () => {
      const columnId = route.params.id;
      await Promise.all([fetchColumnDetail(columnId), fetchAllArticles(columnId)]);
    });

    // 定义 viewArticle 方法
    const viewArticle = (articleId) => {
      router.push({ name: 'ArticleDetail', params: { id: articleId } });
    };

    return {
      columnDetail,
      allArticles,
      viewArticle
    };
  }
});
</script>
<template>
  <body>
    <ParentHeader></ParentHeader>
    <div v-if="columnDetail" class="all-articles-container">
      <div class="container-header">
      </div>
      <div class="articles-list">
        <div v-for="article in allArticles" :key="article.articleId" class="article-item" @click="viewArticle(article.articleId)">
          <div class="article-content">
            <img :src="article.coverImageUrl" alt="" class="article-image">
            <h3 > {{ article.title }}</h3>
            <p>{{ article.resume }}</p>
            <span>发布时间：{{ article.updatedTime }}</span>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </body>
</template>
  

 <style scoped>
 /* 全局容器 */
 .all-articles-container {
   padding: 20px;
   max-width: 80%; /* 使用最大宽度 */
   margin-left: 320px;
   margin-right: auto; /* 居中对齐 */
 }
 
 /* 标题栏 */
 .container-header {
   text-align: center;
   margin-bottom: 20px;
 }
 
 .container-header h2 {
   font-size: 2em;
   color: #333;
 }
 
 /* 文章列表 */
 .articles-list {
   display: flex;
   flex-direction: column; /* 确保项目垂直排列 */
   gap: 20px; /* 设置项目之间的间隔 */
 }
 
 /* 文章项 */
 .article-item {
 
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
   width: 100%; /* 每个文章项占满整个宽度 */
   padding: 15px;
   cursor: pointer;
   display: flex; /* 使用 Flexbox 布局 */
 }
 
 .article-item:hover {
   transform: translateY(-5px);
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
 }
 
 /* 文章内容 */
 .article-content {
   width: 100%; 
 }
 
 /* 图片样式 */
 .article-image {
   max-width: 150px; /* 设置最大宽度 */
   margin-right: 20px; /* 给图片与文本之间留出空间 */
  
   object-fit: cover; /* 确保图片不失真 */
 }
 
 /* 文章信息 */
 .article-info {
   flex-grow: 1; /* 让文本内容占据剩余的空间 */
 }
 
 .article-info h3 {
  align-items: flex-start; /* 对齐顶部 */
   margin: 0;
   font-size: 1.2em;
   color: #333;
   margin-bottom: 10px;
 }
 
 .article-info span {
   font-size: 0.9em;
   color: #666;
 }
 </style>